/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default);
    --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down);
    --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color);
    --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default);
    --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
    --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
    --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
    --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color);
    --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
    --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color);
    --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color);
}

:host([disabled]) {
    --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color);
}

:host([emphasized]) {
    --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900);
    --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000);
    --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100);
    --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000);
    --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900);
    --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000);
    --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100);
    --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000);
}

:host,
:host {
    --spectrum-switch-min-height: var(--spectrum-component-height-100);
    --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium);
    --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium);
    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100);
    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium);
    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
    --spectrum-switch-font-size: var(--spectrum-font-size-100);
}

:host([size="s"]) {
    --spectrum-switch-min-height: var(--spectrum-component-height-75);
    --spectrum-switch-control-width: var(--spectrum-switch-control-width-small);
    --spectrum-switch-control-height: var(--spectrum-switch-control-height-small);
    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75);
    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small);
    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
    --spectrum-switch-font-size: var(--spectrum-font-size-75);
}

:host([size="l"]) {
    --spectrum-switch-min-height: var(--spectrum-component-height-200);
    --spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
    --spectrum-switch-control-height: var(--spectrum-switch-control-height-large);
    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200);
    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large);
    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
    --spectrum-switch-font-size: var(--spectrum-font-size-200);
}

:host([size="xl"]) {
    --spectrum-switch-min-height: var(--spectrum-component-height-300);
    --spectrum-switch-control-width: var(--spectrum-switch-control-width-extra-large);
    --spectrum-switch-control-height: var(--spectrum-switch-control-height-extra-large);
    --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300);
    --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large);
    --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
    --spectrum-switch-font-size: var(--spectrum-font-size-300);
}

:host {
    min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height));
    max-inline-size: 100%;
    vertical-align: top;
    align-items: flex-start;
    display: inline-flex;
    position: relative;
}

#input {
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

:host([checked]) #input + #switch:before {
    transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%));
}

:host([checked]) #input + #switch:dir(rtl):before,
:host([dir="rtl"][checked]) #input + #switch:before {
    transform: translateX(calc((var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%) * -1));
}

:host([disabled]) #input,
:host([disabled]) #input {
    cursor: default;
}

#input:focus-visible + #switch:after {
    margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
}

#label {
    color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default)));
    margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing));
    font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size));
    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
    transition: color var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) ease-in-out;
    margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label));
    margin-block-end: 0;
}

#switch {
    box-sizing: border-box;
    inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width));
    margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control)));
    vertical-align: middle;
    transition:
        background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
        border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
    block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
    border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2);
    flex-grow: 0;
    flex-shrink: 0;
    margin-inline: 0;
    display: inline-block;
    position: relative;
    inset-inline: 0;
}

#switch:before {
    box-sizing: border-box;
    transition:
        background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
        border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
        transform var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out,
        box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
    inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
    block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height));
    border-width: var(--mod-border-width-200, var(--spectrum-border-width-200));
    border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2);
    border-style: solid;
}

#switch:after,
#switch:before {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

#switch:after {
    border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2 + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
    transition:
        opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
        margin var(--spectrum-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
    margin: 0;
    inset-block-end: 0;
    inset-inline-end: 0;
}

#switch {
    background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color)));
}

#switch:before {
    background-color: var(--highcontrast-switch-handle-background-color, var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color)));
    border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default)));
}

:host(:active) #input + #switch:before {
    border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down)));
}

:host(:active) #input ~ #label {
    color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down)));
}

:host(:active[checked]) #input:enabled + #switch {
    background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down)));
}

:host(:active[checked]) #input:enabled + #switch:before {
    border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down)));
}

#input:focus-visible + #switch:after {
    box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
}

#input:focus-visible + #switch:before {
    border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus)));
}

:host([checked]) #input:focus-visible + #switch {
    background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)));
}

:host([checked]) #input:focus-visible + #switch:before {
    border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus)));
}

#input:focus-visible ~ #label {
    color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus)));
}

@media (hover: hover) {
    :host(:hover) #input + #switch:before {
        border-color: var(--highcontrast-switch-handle-border-color-hover, var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover)));
        box-shadow: none;
    }

    :host(:hover) #input ~ #label {
        color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover)));
    }

    :host([checked]:hover) #input:enabled + #switch {
        background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover)));
    }

    :host([checked]:hover) #input:enabled + #switch:before {
        border-color: var(--highcontrast-switch-handle-border-color-selected-hover, var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover)));
    }

    :host([disabled]:hover) #input + #switch,
    :host([disabled]:hover) #input + #switch {
        background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
    }

    :host([disabled]:hover) #input + #switch:before,
    :host([disabled]:hover) #input + #switch:before {
        border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
    }

    :host([disabled]:hover) #input ~ #label,
    :host([disabled]:hover) #input ~ #label {
        color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
    }

    :host([disabled][checked]:hover) #input + #switch,
    :host([disabled][checked]:hover) #input + #switch {
        background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
    }

    :host([disabled][checked]:hover) #input + #switch:before,
    :host([disabled][checked]:hover) #input + #switch:before {
        border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
    }

    :host([disabled][checked]:hover) #input ~ #label,
    :host([disabled][checked]:hover) #input ~ #label {
        color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
    }

    :host(:hover) #input:focus-visible + #switch:after {
        box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color)));
    }

    :host(:hover) #input:focus-visible + #switch:before {
        border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus)));
    }

    :host([checked]:hover) #input:focus-visible + #switch {
        background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus)));
    }

    :host([checked]:hover) #input:focus-visible + #switch:before {
        border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus)));
    }

    :host(:hover) #input:focus-visible ~ #label {
        color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus)));
    }
}

:host([checked]) #input + #switch {
    background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default)));
}

:host([checked]) #input + #switch:before {
    border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default)));
}

:host([disabled]) #input + #switch,
:host([disabled]) #input + #switch {
    background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled));
}

:host([disabled]) #input + #switch:before,
:host([disabled]) #input + #switch:before {
    border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
}

:host([disabled][checked]) #input + #switch,
:host([disabled][checked]) #input + #switch {
    background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled)));
}

:host([disabled][checked]) #input + #switch:before,
:host([disabled][checked]) #input + #switch:before {
    border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled)));
}

:host([disabled]) #input ~ #label,
:host([disabled]) #input ~ #label {
    color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled)));
}

@media (forced-colors: active) {
    :host {
        --highcontrast-switch-label-color-default: ButtonText;
        --highcontrast-switch-label-color-hover: ButtonText;
        --highcontrast-switch-label-color-down: ButtonText;
        --highcontrast-switch-label-color-focus: ButtonText;
        --highcontrast-switch-label-color-disabled: GrayText;
        --highcontrast-switch-handle-background-color: ButtonFace;
        --highcontrast-switch-handle-border-color-default: ButtonText;
        --highcontrast-switch-handle-border-color-hover: Highlight;
        --highcontrast-switch-handle-border-color-down: Highlight;
        --highcontrast-switch-handle-border-color-focus: Highlight;
        --highcontrast-switch-handle-border-color-disabled: Highlight;
        --highcontrast-switch-handle-border-color-selected-default: Highlight;
        --highcontrast-switch-handle-border-color-selected-hover: Highlight;
        --highcontrast-switch-handle-border-color-selected-down: Highlight;
        --highcontrast-switch-handle-border-color-selected-focus: Highlight;
        --highcontrast-switch-background-color: ButtonFace;
        --highcontrast-switch-background-color-selected-default: Highlight;
        --highcontrast-switch-background-color-selected-hover: Highlight;
        --highcontrast-switch-background-color-selected-down: Highlight;
        --highcontrast-switch-background-color-selected-focus: Highlight;
        --highcontrast-switch-background-color-selected-disabled: Highlight;
        --highcontrast-switch-focus-indicator-color: ButtonText;
        forced-color-adjust: none;
    }

    #input:not(:checked) + #switch {
        box-shadow: inset 0 0 0 1px ButtonText;
    }

    @media (hover: hover) {
        :host(:hover) #input:not(:checked) + #switch {
            box-shadow: inset 0 0 0 1px Highlight;
        }

        :host([disabled][checked]:hover) #input + #switch,
        :host([disabled][checked]:hover) #input + #switch {
            box-shadow: inset 0 0 0 1px GrayText;
            background-color: GrayText;
        }

        :host([disabled][checked]:hover) #input + #switch:before,
        :host([disabled][checked]:hover) #input + #switch:before {
            border-color: GrayText;
            background-color: ButtonFace;
        }
    }

    :host([disabled]) #input:not(:checked) + #switch,
    :host([disabled]) #input:not(:checked) + #switch {
        box-shadow: inset 0 0 0 1px GrayText;
        background-color: ButtonFace;
    }

    :host([disabled]) #input:not(:checked) + #switch:before,
    :host([disabled]) #input:not(:checked) + #switch:before {
        border-color: GrayText;
        background-color: ButtonFace;
    }

    :host([disabled][checked]) #input + #switch,
    :host([disabled][checked]) #input + #switch {
        box-shadow: inset 0 0 0 1px GrayText;
        background-color: GrayText;
    }

    :host([disabled][checked]) #input + #switch:before,
    :host([disabled][checked]) #input + #switch:before {
        border-color: GrayText;
        background-color: ButtonFace;
    }

    :host([disabled]) #input ~ #label,
    :host([disabled]) #input ~ #label {
        color: GrayText;
    }
}
